<template>
    <div>
        <div class="tabNav">
            <router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
            <b>/<img style="top: 1px" src="../assets/img/settlement.png" />无感发薪结算单</b>
            <el-input
                placeholder="请输入企业名称进行搜索"
                suffix-icon="el-icon-search"
                @change="searchMethods"
                v-model="searchValue">
            </el-input>
            <!-- <em><i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-data"></i>结算数量：{{ settlementCountNumber }}</em> -->
        </div>

        <el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee cardTitcc" shadow="hover">
					<!-- <div v-if="activeName == 0" class="excelDownload"> -->
                    <!-- <div class="excelDownload">
						<el-button size="small" type="primary" @click="clearFiles">下载</el-button>
					</div> -->
					<el-tabs class="tab-personal" v-model="activeName">
						<el-tab-pane label="全部" name="0">
							<settlement-table v-if="activeName == 0" ref="searchMethods" :search="searchValue" :personalType="0"></settlement-table>
						</el-tab-pane>
						<el-tab-pane label="未打款" :lazy="true" name="1">
							<settlement-table v-if="activeName == 1" ref="searchMethods" :search="searchValue" :personalType="1"></settlement-table>
						</el-tab-pane>
						<el-tab-pane label="已打款" :lazy="true" name="2">
							<settlement-table v-if="activeName == 2" ref="searchMethods" :search="searchValue" :personalType="2"></settlement-table>
						</el-tab-pane>
						<el-tab-pane label="已作废" :lazy="true" name="3">
							<settlement-table v-if="activeName == 3" ref="searchMethods" :search="searchValue" :personalType="3"></settlement-table>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>

    </div>
</template>

<script>
import SettlementTable from '../components/table/SettlementTables.vue'
export default {
    name: "dashboard",
    data() {
        return {
            activeName: '0',
            searchValue: '',
			settlementCountNumber: 0 // 结算数量
        };
    },
    components: {
		SettlementTable
    },
	mounted() {
		// this.settlementCount()
	},
    methods: {
		searchMethods() {
			// 搜索
			this.$refs.searchMethods.getTableData()
		},
		settlementCount() {
			// 获取结算数量
			this.$http({
				url: '/api/settlement/selectSettlementCount',
				method: 'post',
				headers: {
					'Content-Type': 'application/json'
				}
			}).then(data => {
				if(data.code === 0) {
					this.settlementCountNumber = data.result
				}
			})
		},
    }
};
</script>
<style lang="scss" scoped>
.tab-personal {
    background-color: #FFFFFF;
    :deep(.el-tabs__header)  {
        margin-bottom: 10px;
        padding: 8px 20px 0;
    }
    :deep(.el-tabs__item) {
        color: #0A2E6A;
        font-weight: normal;
    }
    :deep(.el-tabs__item.is-active) {
        color: #326CF0;
        font-weight: 500;
    }
    :deep(.el-tabs__nav-wrap::after) {
        background-color: #FFFFFF;
    }
    :deep(.el-tabs__active-bar) {
        background-color: #326CF0;
        height: 4px;
        border-radius: 2px;
    }
}
.cardTitcc {
    margin-bottom: -10px;
}
.excelDownload {
    position: absolute;
    right: 30px;
    top: 14px;
    cursor: pointer;
    z-index: 111;
}
</style>